
$(function () {
    //下代码是获取url 参数   自行更具情况进行修改 获取的参数作为文章的id

    var  catalogueId

    function GetUrlParms()
    {
        var args = new Object();
        var query = location.search.substring(1); //获取查询串
        var pairs = query.split("&"); //在逗号处断开
        for (var i = 0; i < pairs.length; i++)
        {
            var pos = pairs[i].indexOf('='); //查找name=value
            if (pos == -1) continue; //如果没有找到就跳过
            var argname = pairs[i].substring(0, pos); //提取name
            var value = pairs[i].substring(pos + 1); //提取value
            args[argname] = unescape(value); //存为属性
        }
        return args;
    }

    var args = new Object();
    args = GetUrlParms();

//如果要查找参数key:
    if (args["catalogueId"] != undefined)
    {
        //如果要查找参数key:
        catalogueId = args["catalogueId"];

    }



//获取文章的唯一识别id
    console.log(catalogueId)


    var their=catalogueId
    if(their!=="undefined"&&their!==""&&their!==undefined) {

// 测试使用 test  正式使用请换成文章的 唯一id    这个id随意 主要就是区分不同文章的评论
// var their="test"


        $.get('http://'+http_ip+':10087/comment/comment_select?their=' + their, function (data) {

            if (data.length !== 0) {
                $("#pingl_null").hide()
            }

            for (let i = 0; i < data.length; i++) {
                var c_img = Math.floor(Math.random() * 20 + 1);
                var div = $("        <div class=\"media position-relative\" >\n" +
                    "            <img src=\"../img/" + c_img + ".jpg\" height=\"50\" width=\"50\"  class=\"mr-3\" alt=\"...\">\n" +
                    "            <div class=\"media-body\" id=" + data[i].id + ">\n" +
                    "                   <span class=\"mt-0 h6  d-none d-lg-block\">匿名用户:" + data[i].id.substring(0, 10) + " </span>\n" +
                    "                    <span class=\"position-absolute  d-none d-lg-block\" style=\"right: 60px\">" + data[i].time + " </span>\n" +
                    "                   <a type=\"button\" class=\" position-absolute text-danger huifu\" style=\"right: 10px\" id='" + data[i].id + "' >回复</a>\n" +
                    "                <p>" + data[i].context + "</p>\n" +
                    "\n" +
                    "                <div class=\"input-group  huifu_text  text_hie \" style=\"display: none\"   >\n" +
                    "                    <textarea class=\"form-control\" aria-label=\"With textarea\" placeholder=\"请输入评论\"></textarea>\n" +
                    "                    <button type=\"button\" class=\"btn btn-light  btn_tij \" key=" + data[i].id + ">提交</button>\n" +
                    "                </div>\n" +
                    "\n" +
                    "            </div>\n" +
                    "        </div>")


                $("#comment").append(div)

                // 进行递归 迭代 子级评论
                commet(data[i].id)


            }

        })


        function commet(id) {

            $.get("http://"+http_ip+":10087/comment/comment_select_son?their=" + their + "&&reply_id=" + id + "", function (data) {
                console.log(data)


                if (data.length !== 0) {
                    for (let i = 0; i < data.length; i++) {
                        var c_img = Math.floor(Math.random() * 20 + 1);
                        var div = $("        <div class=\"media position-relative\" >\n" +
                            "            <img src=\"../img/" + c_img + ".jpg\" height=\"50\" width=\"50\"  class=\"mr-3\" alt=\"...\">\n" +
                            "            <div class=\"media-body\" id=" + data[i].id + ">\n" +
                            "                   <span class=\"mt-0 h6  d-none d-lg-block\">匿名用户:" + data[i].id.substring(0, 10) + " </span>\n" +
                            "                    <span class=\"position-absolute d-none d-lg-block  \" style=\"right: 60px\">" + data[i].time + "</span>\n" +
                            "                   <a type=\"button\" class=\" position-absolute text-danger  huifu\" style=\"right: 10px\"   id='" + data[i].id + "'>回复</a>\n" +
                            "                   <p>" + data[i].context + "</p>\n" +
                            "\n" +
                            "                <div class=\"input-group  huifu_text text_hie \" style=\"display: none\" >\n" +
                            "                    <textarea class=\"form-control\" aria-label=\"With textarea\" placeholder=\"请输入评论\"></textarea>\n" +
                            "                    <button type=\"button\" class=\"btn btn-light btn_tij \" key=" + data[i].id + " >提交</button>\n" +
                            "                </div>\n" +
                            "\n" +
                            "            </div>\n" +
                            "        </div>")


                        $("#" + id).append(div)
                        commet(data[i].id)

                    }

                }
            })

        }




        $("body").on("click", "#comment .huifu", function (e) {
            var v_id = $(e.target).attr('id');
            $("#" + v_id + " .input-group:eq(0)").toggle()
                for (let i = 0; i < $(".huifu_text").length; i++) {
                    var id_1 = $(e.target).attr('id');
                    var id_2=$(".huifu:eq(" + i + ")").attr('id');
                    if(id_1!==id_2){

                        $(".text_hie:eq(" + i + ")").hide();
                    }
                }
        })


//回复评论  btn_tij

        $("body").on("click", "#comment .btn_tij", function (e) {
            var reply_id = $(e.target).attr('key');
            var textarea = $(e.target).siblings("textarea");
            var text = textarea.val();


            if (text.trim() === "") {
                alert("评论提交不能为空")
                return false;
            }

            let reg = new RegExp(/\ud83c[\udf00-\udfff]|\ud83d[\udc00-\ude4f]|\ud83d[\ude80-\udeff]/)
            if (reg.test(text)) {
                alert('不能输入表情符号');
                return false
            }

            textarea.val("");  //清空


            for (let i = 0; i < $(".huifu_text").length; i++) {
                $(".text_hie:eq(" + i + ")").hide()
            }

            var josn = {
                "id": "",
                "time": "",
                "context": text,
                "reply_id": reply_id,
                "their": their
            }


            $.ajax({
                type: "POST",
                url: "http://"+http_ip+":10087/comment/add",
                data: JSON.stringify(josn),
                contentType: "application/json",
                dataType: "json",
                complete: function (data) {

                    if (data.responseJSON !== undefined) {
                        var c_img = Math.floor(Math.random() * 20 + 1);
                        var div = $("        <div class=\"media position-relative\" >\n" +
                            "            <img src=\"../img/" + c_img + ".jpg\" height=\"50\" width=\"50\" class=\"mr-3\" alt=\"...\">\n" +
                            "            <div class=\"media-body\" id=" + data.responseJSON.id + ">\n" +
                            "                   <span class=\"mt-0 h6  d-none d-lg-block\">匿名用户:" + data.responseJSON.id.substring(0, 10) + " </span>\n" +
                            "                    <span class=\"position-absolute  d-none d-lg-block\" style=\"right: 60px\">" + data.responseJSON.time + " </span>\n" +
                            "                   <a type=\"button\" class=\" position-absolute text-danger huifu\" style=\"right: 10px\" id='" + data.responseJSON.id + "' >回复</a>\n" +
                            "                <p>" + data.responseJSON.context + "</p>\n" +
                            "\n" +
                            "                <div class=\"input-group huifu_text  text_hie\" style=\"display: none\"   >\n" +
                            "                    <textarea class=\"form-control\" aria-label=\"With textarea\" placeholder=\"请输入评论\"></textarea>\n" +
                            "                    <button type=\"button\" class=\"btn btn-light btn_tij \" key=" + data.responseJSON.id + ">提交</button>\n" +
                            "                </div>\n" +
                            "\n" +
                            "            </div>\n" +
                            "        </div>")


                        $(e.target).parent().after(div)
                    }


                }
            });


            $("#pingl_null").hide()

        })


// 写评论    也就是一级评论
        $("#btn_fu").click(function () {
            var textarea = $("#btn_fu").siblings("textarea");
            var text = textarea.val();

            if (text.trim() === "") {
                alert("评论提交不能为空")
                return false;
            }


            let reg = new RegExp(/\ud83c[\udf00-\udfff]|\ud83d[\udc00-\ude4f]|\ud83d[\ude80-\udeff]/)
            if (reg.test(text)) {
                alert('不能输入表情符号');
                return false
            }
            textarea.val("");  //清空

            var josn = {
                "id": "",
                "time": "",
                "context": text,
                "reply_id": "null",
                "their": their
            }

            $.ajax({
                type: "POST",
                url: "http://"+http_ip+":10087/comment/add",
                data: JSON.stringify(josn),
                contentType: "application/json",
                dataType: "json",
                complete: function (data) {

                    if (data.responseJSON !== undefined) {
                        var c_img = Math.floor(Math.random() * 20 + 1);
                        var div = $("        <div class=\"media position-relative\" >\n" +
                            "            <img src=\"../img/" + c_img + ".jpg\" height=\"50\" width=\"50\" class=\"mr-3\" alt=\"...\">\n" +
                            "            <div class=\"media-body\" id=" + data.responseJSON.id + ">\n" +
                            "                   <span class=\"mt-0 h6  d-none d-lg-block\">匿名用户:" + data.responseJSON.id.substring(0, 10) + " </span>\n" +
                            "                    <span class=\"position-absolute  d-none d-lg-block\" style=\"right: 60px\">" + data.responseJSON.time + " </span>\n" +
                            "                   <a type=\"button\" class=\" position-absolute text-danger huifu\" style=\"right: 10px\" id='" + data.responseJSON.id + "' >回复</a>\n" +
                            "                <p>" + data.responseJSON.context + "</p>\n" +
                            "\n" +
                            "                <div class=\"input-group  huifu_text text_hie\" style=\"display: none\"   >\n" +
                            "                    <textarea class=\"form-control\" aria-label=\"With textarea\" placeholder=\"请输入评论\"></textarea>\n" +
                            "                    <button type=\"button\" class=\"btn btn-light btn_tij \" key=" + data.responseJSON.id + ">提交</button>\n" +
                            "                </div>\n" +
                            "\n" +
                            "            </div>\n" +
                            "        </div>")


                        $("#tou").after(div)
                    }


                }
            });


            $("#pingl_null").hide()


        })
    }else {
        alert("没有识别出来文章id--评论区将失效")
    }



})